<template>
  <el-main>
    <el-row>
      <el-col :span="12" v-loading=loading>
        <p>您的问题：</p>
        <!--          <el-input-->
        <!--                type="textarea"-->
        <!--                :rows="3"-->
        <!--                placeholder="请输入请求参数"-->
        <!--                v-model="messasge">-->
        <!--            </el-input>-->
        <el-form :model="ruleForm" ref="ruleForm" label-width="100px" class="demo-ruleForm">

          <el-form-item>
            <el-input
                type="textarea"
                :rows="10"
                placeholder="提问信息"
                v-model="ruleForm.messasge">
            </el-input>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm','result_other')">提问</el-button>
            <el-button @click="resetForm('ruleForm')">重置</el-button>
          </el-form-item>
        </el-form>
      </el-col>

      <el-col :span="1">


      </el-col>

      <el-col :span="11">
        <el-button size="large" type="warning" round :disabled=down_disable @click="downloadResult('md','result_other')">
          下载md格式
        </el-button>
        <el-button size="large" type="warning" round :disabled=down_disable @click="downloadResult('txt','result_other')">
          下载txt格式
        </el-button>

        <p id="result_other" style="color:red;white-space: pre-wrap"></p>
      </el-col>

    </el-row>

  </el-main>
</template>

<script>
import {fetchEventSource} from "@microsoft/fetch-event-source";

export default {
  name: "ai-others",
  data() {
    return {
      loading: false,
      down_disable: true,
      ruleForm: {
        messasge: ''
      },
    }

  },
  methods: {
    submitForm(formName,resultId) {
      document.getElementById(resultId).innerHTML = ''
      this.$refs[formName].validate((valid) => {
            if (valid) {
              //处理下ruleForm //content
              this.loading = true

              let chatobj = {}
              chatobj.content = this.ruleForm['messasge']
              let self = this
              let controller = new AbortController()
              const eventSource = fetchEventSource('http://127.0.0.1:5000/chat2', {
                method: 'POST',
                headers: {'Content-Type': 'application/json'},
                body: JSON.stringify(
                    chatobj
                ),
                signal: controller.signal,
                onopen() {
                  console.log('open')
                },
                onmessage(event) {
                  console.log('onMessage', event.data)
                  if (event.data === '[DONE]') {
                    self.loading = false
                    self.down_disable = false
                    controller.abort();
                    eventSource.close();
                  } else {
                    document.getElementById(resultId).innerHTML =
                        document.getElementById(resultId).innerHTML + event.data
                  }
                },
                onclose() {
                  controller.abort();
                  eventSource.close();
                },
                onerror(error) {
                  console.log('close', error)
                  controller.abort();
                  eventSource.close();
                  document.getElementById(resultId).innerHTML = 'AI繁忙,请重试'
                }
              })
            } else {
              this.$message.error('数据缺失');
              return false;
            }
          }
      );
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    downloadResult(fileType, resultId) {
      let text = document.getElementById(resultId).innerText;
      let element = document.createElement("a");
      let file = new Blob([text], {type: 'text/plain'});
      element.href = URL.createObjectURL(file);
      element.download = "download." + fileType;
      element.click();
    }
  }
}
</script>

<style scoped>

</style>